<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>我做了一个手写春联小网页，祝大家虎年暴富 | Regulus blog</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/img/r.png">
    <meta name="description" content="web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="baidu-site-verification" content="7F55weZDDc">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.aa32e21e.css" as="style"><link rel="preload" href="/assets/js/app.7b2d88eb.js" as="script"><link rel="preload" href="/assets/js/2.f4c0ca1c.js" as="script"><link rel="preload" href="/assets/js/3.18247282.js" as="script"><link rel="preload" href="/assets/js/86.435a7f7a.js" as="script"><link rel="prefetch" href="/assets/js/10.4b0c27e5.js"><link rel="prefetch" href="/assets/js/100.1898ccae.js"><link rel="prefetch" href="/assets/js/101.51899d7e.js"><link rel="prefetch" href="/assets/js/102.e12f616e.js"><link rel="prefetch" href="/assets/js/103.057bb292.js"><link rel="prefetch" href="/assets/js/104.93d3fabf.js"><link rel="prefetch" href="/assets/js/105.c9effd85.js"><link rel="prefetch" href="/assets/js/106.8e8b546b.js"><link rel="prefetch" href="/assets/js/107.9ab11264.js"><link rel="prefetch" href="/assets/js/108.882d3703.js"><link rel="prefetch" href="/assets/js/109.998da69c.js"><link rel="prefetch" href="/assets/js/11.ccec875e.js"><link rel="prefetch" href="/assets/js/110.886f3d58.js"><link rel="prefetch" href="/assets/js/111.676a5e1e.js"><link rel="prefetch" href="/assets/js/112.68f1c7e9.js"><link rel="prefetch" href="/assets/js/113.4165d5a6.js"><link rel="prefetch" href="/assets/js/114.e3fb2844.js"><link rel="prefetch" href="/assets/js/115.91072fbd.js"><link rel="prefetch" href="/assets/js/116.dc4ade23.js"><link rel="prefetch" href="/assets/js/117.d92781da.js"><link rel="prefetch" href="/assets/js/118.04434c18.js"><link rel="prefetch" href="/assets/js/119.0fdf0b26.js"><link rel="prefetch" href="/assets/js/12.25141a02.js"><link rel="prefetch" href="/assets/js/120.a09a4801.js"><link rel="prefetch" href="/assets/js/121.debff418.js"><link rel="prefetch" href="/assets/js/122.186a4053.js"><link rel="prefetch" href="/assets/js/123.c16c9952.js"><link rel="prefetch" href="/assets/js/124.00230ebf.js"><link rel="prefetch" href="/assets/js/125.8fdca848.js"><link rel="prefetch" href="/assets/js/126.7fa13184.js"><link rel="prefetch" href="/assets/js/127.c1e41f8c.js"><link rel="prefetch" href="/assets/js/128.fbf45231.js"><link rel="prefetch" href="/assets/js/129.169029bb.js"><link rel="prefetch" href="/assets/js/13.b21ddc31.js"><link rel="prefetch" href="/assets/js/130.3b948cee.js"><link rel="prefetch" href="/assets/js/131.c3b53ca8.js"><link rel="prefetch" href="/assets/js/132.beacbd71.js"><link rel="prefetch" href="/assets/js/133.3dca78c6.js"><link rel="prefetch" href="/assets/js/134.9c1636cb.js"><link rel="prefetch" href="/assets/js/135.6eb8b3a4.js"><link rel="prefetch" href="/assets/js/136.9f2ac38b.js"><link rel="prefetch" href="/assets/js/137.c0ae10ee.js"><link rel="prefetch" href="/assets/js/138.05d3f9f6.js"><link rel="prefetch" href="/assets/js/139.67e5be0d.js"><link rel="prefetch" href="/assets/js/14.cf11c53f.js"><link rel="prefetch" href="/assets/js/140.12f1ec3d.js"><link rel="prefetch" href="/assets/js/141.3c2d8167.js"><link rel="prefetch" href="/assets/js/142.1a1dac30.js"><link rel="prefetch" href="/assets/js/143.bff22a6c.js"><link rel="prefetch" href="/assets/js/144.442f029d.js"><link rel="prefetch" href="/assets/js/145.77cfcc38.js"><link rel="prefetch" href="/assets/js/146.630e6922.js"><link rel="prefetch" href="/assets/js/147.363fe99f.js"><link rel="prefetch" href="/assets/js/148.1a71847d.js"><link rel="prefetch" href="/assets/js/149.54def788.js"><link rel="prefetch" href="/assets/js/15.73b88b68.js"><link rel="prefetch" href="/assets/js/150.c5fd0625.js"><link rel="prefetch" href="/assets/js/151.b8571bea.js"><link rel="prefetch" href="/assets/js/152.ffdab764.js"><link rel="prefetch" href="/assets/js/153.d45b9ebd.js"><link rel="prefetch" href="/assets/js/154.ecb2563e.js"><link rel="prefetch" href="/assets/js/155.e0428358.js"><link rel="prefetch" href="/assets/js/156.ba5a4bde.js"><link rel="prefetch" href="/assets/js/157.9fdb5bbe.js"><link rel="prefetch" href="/assets/js/158.a55d885e.js"><link rel="prefetch" href="/assets/js/159.3378a366.js"><link rel="prefetch" href="/assets/js/16.92c44e3b.js"><link rel="prefetch" href="/assets/js/160.07daebe1.js"><link rel="prefetch" href="/assets/js/161.854effd8.js"><link rel="prefetch" href="/assets/js/162.45f6c294.js"><link rel="prefetch" href="/assets/js/163.97912bd9.js"><link rel="prefetch" href="/assets/js/164.35d69e0d.js"><link rel="prefetch" href="/assets/js/165.96d485c1.js"><link rel="prefetch" href="/assets/js/166.82d06717.js"><link rel="prefetch" href="/assets/js/167.27a2de45.js"><link rel="prefetch" href="/assets/js/168.8a407269.js"><link rel="prefetch" href="/assets/js/169.cde0c32c.js"><link rel="prefetch" href="/assets/js/17.1ec00ba3.js"><link rel="prefetch" href="/assets/js/170.281c1b2a.js"><link rel="prefetch" href="/assets/js/171.2d5aa56a.js"><link rel="prefetch" href="/assets/js/172.b936e284.js"><link rel="prefetch" href="/assets/js/173.ea7fd7dd.js"><link rel="prefetch" href="/assets/js/174.aba89825.js"><link rel="prefetch" href="/assets/js/175.51a96fe9.js"><link rel="prefetch" href="/assets/js/176.9d6e98ab.js"><link rel="prefetch" href="/assets/js/177.54228312.js"><link rel="prefetch" href="/assets/js/178.a770688a.js"><link rel="prefetch" href="/assets/js/179.7d857ed2.js"><link rel="prefetch" href="/assets/js/18.ea280a32.js"><link rel="prefetch" href="/assets/js/180.26673516.js"><link rel="prefetch" href="/assets/js/181.4a16d9f5.js"><link rel="prefetch" href="/assets/js/182.ed9cb8b1.js"><link rel="prefetch" href="/assets/js/183.42b6d33c.js"><link rel="prefetch" href="/assets/js/184.a360c87d.js"><link rel="prefetch" href="/assets/js/185.2ef13eae.js"><link rel="prefetch" href="/assets/js/186.e108205f.js"><link rel="prefetch" href="/assets/js/187.76ae83d3.js"><link rel="prefetch" href="/assets/js/188.ed159a3f.js"><link rel="prefetch" href="/assets/js/189.92fa9121.js"><link rel="prefetch" href="/assets/js/19.709e7e54.js"><link rel="prefetch" href="/assets/js/190.5654334f.js"><link rel="prefetch" href="/assets/js/191.6ba00f25.js"><link rel="prefetch" href="/assets/js/192.aed7fb93.js"><link rel="prefetch" href="/assets/js/193.d8860bff.js"><link rel="prefetch" href="/assets/js/194.c49d99bf.js"><link rel="prefetch" href="/assets/js/195.4e7a0c4b.js"><link rel="prefetch" href="/assets/js/196.cfa614c3.js"><link rel="prefetch" href="/assets/js/197.31e7e353.js"><link rel="prefetch" href="/assets/js/198.a95fb767.js"><link rel="prefetch" href="/assets/js/199.0c4e9d8b.js"><link rel="prefetch" href="/assets/js/20.812cdba5.js"><link rel="prefetch" href="/assets/js/200.9d60c6f3.js"><link rel="prefetch" href="/assets/js/201.541de22a.js"><link rel="prefetch" href="/assets/js/202.ebd7e143.js"><link rel="prefetch" href="/assets/js/203.2d382b47.js"><link rel="prefetch" href="/assets/js/204.f60df560.js"><link rel="prefetch" href="/assets/js/205.f71cf275.js"><link rel="prefetch" href="/assets/js/206.ccf3c4d4.js"><link rel="prefetch" href="/assets/js/207.14609320.js"><link rel="prefetch" href="/assets/js/208.a93faa75.js"><link rel="prefetch" href="/assets/js/209.9ee7fd24.js"><link rel="prefetch" href="/assets/js/21.6d3c0109.js"><link rel="prefetch" href="/assets/js/210.6481ce08.js"><link rel="prefetch" href="/assets/js/211.89af95f8.js"><link rel="prefetch" href="/assets/js/212.4e3fe38e.js"><link rel="prefetch" href="/assets/js/213.be56d477.js"><link rel="prefetch" href="/assets/js/214.b167e8d5.js"><link rel="prefetch" href="/assets/js/215.cc36b354.js"><link rel="prefetch" href="/assets/js/216.16832645.js"><link rel="prefetch" href="/assets/js/217.1c87377e.js"><link rel="prefetch" href="/assets/js/218.42f8d157.js"><link rel="prefetch" href="/assets/js/219.3e259a80.js"><link rel="prefetch" href="/assets/js/22.5f6123da.js"><link rel="prefetch" href="/assets/js/220.bf5f88a9.js"><link rel="prefetch" href="/assets/js/221.27a3649b.js"><link rel="prefetch" href="/assets/js/222.f0749edf.js"><link rel="prefetch" href="/assets/js/223.5e76f95d.js"><link rel="prefetch" href="/assets/js/224.ed59d3e8.js"><link rel="prefetch" href="/assets/js/225.115ecb54.js"><link rel="prefetch" href="/assets/js/226.096bde0d.js"><link rel="prefetch" href="/assets/js/227.486b608e.js"><link rel="prefetch" href="/assets/js/228.23a72294.js"><link rel="prefetch" href="/assets/js/229.a2ff2166.js"><link rel="prefetch" href="/assets/js/23.4b2ea27d.js"><link rel="prefetch" href="/assets/js/230.0da4dd11.js"><link rel="prefetch" href="/assets/js/231.361990f6.js"><link rel="prefetch" href="/assets/js/232.dd1b7d39.js"><link rel="prefetch" href="/assets/js/233.99e368e4.js"><link rel="prefetch" href="/assets/js/234.106fcd55.js"><link rel="prefetch" href="/assets/js/235.ea8cf00e.js"><link rel="prefetch" href="/assets/js/236.91f14616.js"><link rel="prefetch" href="/assets/js/237.70f43146.js"><link rel="prefetch" href="/assets/js/238.c8816ebe.js"><link rel="prefetch" href="/assets/js/239.5c5ad778.js"><link rel="prefetch" href="/assets/js/24.9759b6d2.js"><link rel="prefetch" href="/assets/js/240.4f86ea50.js"><link rel="prefetch" href="/assets/js/25.218bbdf2.js"><link rel="prefetch" href="/assets/js/26.8aab1593.js"><link rel="prefetch" href="/assets/js/27.3bf63278.js"><link rel="prefetch" href="/assets/js/28.989a78d6.js"><link rel="prefetch" href="/assets/js/29.7a1e3e80.js"><link rel="prefetch" href="/assets/js/30.c0c65623.js"><link rel="prefetch" href="/assets/js/31.49d34086.js"><link rel="prefetch" href="/assets/js/32.73c29628.js"><link rel="prefetch" href="/assets/js/33.4b96af73.js"><link rel="prefetch" href="/assets/js/34.b8e4543c.js"><link rel="prefetch" href="/assets/js/35.f17c99c1.js"><link rel="prefetch" href="/assets/js/36.69b2c659.js"><link rel="prefetch" href="/assets/js/37.c5989e7f.js"><link rel="prefetch" href="/assets/js/38.bd7c9aca.js"><link rel="prefetch" href="/assets/js/39.ffaf6e30.js"><link rel="prefetch" href="/assets/js/4.4fb1f722.js"><link rel="prefetch" href="/assets/js/40.6634fbbb.js"><link rel="prefetch" href="/assets/js/41.9a20f500.js"><link rel="prefetch" href="/assets/js/42.9b10e0de.js"><link rel="prefetch" href="/assets/js/43.913168fb.js"><link rel="prefetch" href="/assets/js/44.89157d4d.js"><link rel="prefetch" href="/assets/js/45.ef0d71d6.js"><link rel="prefetch" href="/assets/js/46.278d0a18.js"><link rel="prefetch" href="/assets/js/47.edcfb794.js"><link rel="prefetch" href="/assets/js/48.983daa7e.js"><link rel="prefetch" href="/assets/js/49.e3866128.js"><link rel="prefetch" href="/assets/js/5.fb48bbeb.js"><link rel="prefetch" href="/assets/js/50.02d58751.js"><link rel="prefetch" href="/assets/js/51.1626ba1c.js"><link rel="prefetch" href="/assets/js/52.43ed9f5a.js"><link rel="prefetch" href="/assets/js/53.188217bf.js"><link rel="prefetch" href="/assets/js/54.ee08e689.js"><link rel="prefetch" href="/assets/js/55.4f9afaef.js"><link rel="prefetch" href="/assets/js/56.90c4f0af.js"><link rel="prefetch" href="/assets/js/57.141efdea.js"><link rel="prefetch" href="/assets/js/58.5ec32105.js"><link rel="prefetch" href="/assets/js/59.9e9cacf6.js"><link rel="prefetch" href="/assets/js/6.fb8fae8b.js"><link rel="prefetch" href="/assets/js/60.a2fd78a8.js"><link rel="prefetch" href="/assets/js/61.f7bbaadb.js"><link rel="prefetch" href="/assets/js/62.0b9da9a1.js"><link rel="prefetch" href="/assets/js/63.63cf95c4.js"><link rel="prefetch" href="/assets/js/64.6e421716.js"><link rel="prefetch" href="/assets/js/65.d16a280a.js"><link rel="prefetch" href="/assets/js/66.c4877be2.js"><link rel="prefetch" href="/assets/js/67.63b10d0c.js"><link rel="prefetch" href="/assets/js/68.269b9164.js"><link rel="prefetch" href="/assets/js/69.2f116908.js"><link rel="prefetch" href="/assets/js/7.384a1b06.js"><link rel="prefetch" href="/assets/js/70.8e54b910.js"><link rel="prefetch" href="/assets/js/71.c15124d9.js"><link rel="prefetch" href="/assets/js/72.3fa89fcc.js"><link rel="prefetch" href="/assets/js/73.9c9bf8f7.js"><link rel="prefetch" href="/assets/js/74.239bde12.js"><link rel="prefetch" href="/assets/js/75.7dce7ebe.js"><link rel="prefetch" href="/assets/js/76.68d2179d.js"><link rel="prefetch" href="/assets/js/77.db5a688b.js"><link rel="prefetch" href="/assets/js/78.2487194e.js"><link rel="prefetch" href="/assets/js/79.698abacc.js"><link rel="prefetch" href="/assets/js/8.952944b0.js"><link rel="prefetch" href="/assets/js/80.e7f4273a.js"><link rel="prefetch" href="/assets/js/81.d6878c5d.js"><link rel="prefetch" href="/assets/js/82.d4ae63bc.js"><link rel="prefetch" href="/assets/js/83.20079250.js"><link rel="prefetch" href="/assets/js/84.964c9e97.js"><link rel="prefetch" href="/assets/js/85.73bdf8d4.js"><link rel="prefetch" href="/assets/js/87.bbbfe016.js"><link rel="prefetch" href="/assets/js/88.ea60f1b2.js"><link rel="prefetch" href="/assets/js/89.64ca73c4.js"><link rel="prefetch" href="/assets/js/9.a93c40e7.js"><link rel="prefetch" href="/assets/js/90.dc0b1642.js"><link rel="prefetch" href="/assets/js/91.414f285b.js"><link rel="prefetch" href="/assets/js/92.16fb1788.js"><link rel="prefetch" href="/assets/js/93.7c74c768.js"><link rel="prefetch" href="/assets/js/94.ecf421fd.js"><link rel="prefetch" href="/assets/js/95.5022c735.js"><link rel="prefetch" href="/assets/js/96.ef3ce30b.js"><link rel="prefetch" href="/assets/js/97.b7ecde81.js"><link rel="prefetch" href="/assets/js/98.70a159b1.js"><link rel="prefetch" href="/assets/js/99.f604a84e.js">
    <link rel="stylesheet" href="/assets/css/0.styles.aa32e21e.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu have-body-img"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/r.png" alt="Regulus blog" class="logo"> <span class="site-name can-hide">Regulus blog</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端文章</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/javascript/" class="nav-link">《JavaScript教程》</a></li><li class="dropdown-subitem"><a href="/note/js/" class="nav-link">《JavaScript高级程序设计》</a></li><li class="dropdown-subitem"><a href="/note/es6/" class="nav-link">《ES6 教程》</a></li><li class="dropdown-subitem"><a href="/note/vue/" class="nav-link">《Vue》</a></li><li class="dropdown-subitem"><a href="/note/react/" class="nav-link">《React》</a></li><li class="dropdown-subitem"><a href="/note/typescript-axios/" class="nav-link">《TypeScript 从零实现 axios》</a></li><li class="dropdown-subitem"><a href="/note/git/" class="nav-link">《Git》</a></li><li class="dropdown-subitem"><a href="/pages/51afd6/" class="nav-link">TypeScript</a></li><li class="dropdown-subitem"><a href="/pages/4643cd/" class="nav-link">JS设计模式总结</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="页面" class="dropdown-title"><a href="/ui/" class="link-title">页面</a> <span class="title" style="display:none;">页面</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/8309a5b876fc95e3/" class="nav-link">HTML</a></li><li class="dropdown-item"><!----> <a href="/pages/0a83b083bdf257cb/" class="nav-link">CSS</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技术" class="dropdown-title"><a href="/technology/" class="link-title">技术</a> <span class="title" style="display:none;">技术</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/9a7ee40fc232253e/" class="nav-link">技术文档</a></li><li class="dropdown-item"><!----> <a href="/pages/4c778760be26d8b3/" class="nav-link">GitHub技巧</a></li><li class="dropdown-item"><!----> <a href="/pages/117708e0af7f0bd9/" class="nav-link">Nodejs</a></li><li class="dropdown-item"><!----> <a href="/pages/41f87d890d0a02af/" class="nav-link">博客搭建</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><a href="/more/" class="link-title">更多</a> <span class="title" style="display:none;">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/f2a556/" class="nav-link">学习</a></li><li class="dropdown-item"><!----> <a href="/pages/aea6571b7a8bae86/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/pages/2d615df9a36a98ed/" class="nav-link">心情杂货</a></li><li class="dropdown-item"><!----> <a href="/pages/baaa02/" class="nav-link">实用技巧</a></li><li class="dropdown-item"><!----> <a href="/friends/" class="nav-link">友情链接</a></li></ul></div></div><div class="nav-item"><a href="/about/" class="nav-link">关于</a></div><div class="nav-item"><a href="/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/linxi0551/linxi0551.github.io" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://tuchuang.voooe.cn/images/2024/04/26/tx.jpg"> <div class="blogger-info"><h3>Regulus🦁</h3> <span>朝全栈努力前行的小学生</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端文章</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/javascript/" class="nav-link">《JavaScript教程》</a></li><li class="dropdown-subitem"><a href="/note/js/" class="nav-link">《JavaScript高级程序设计》</a></li><li class="dropdown-subitem"><a href="/note/es6/" class="nav-link">《ES6 教程》</a></li><li class="dropdown-subitem"><a href="/note/vue/" class="nav-link">《Vue》</a></li><li class="dropdown-subitem"><a href="/note/react/" class="nav-link">《React》</a></li><li class="dropdown-subitem"><a href="/note/typescript-axios/" class="nav-link">《TypeScript 从零实现 axios》</a></li><li class="dropdown-subitem"><a href="/note/git/" class="nav-link">《Git》</a></li><li class="dropdown-subitem"><a href="/pages/51afd6/" class="nav-link">TypeScript</a></li><li class="dropdown-subitem"><a href="/pages/4643cd/" class="nav-link">JS设计模式总结</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="页面" class="dropdown-title"><a href="/ui/" class="link-title">页面</a> <span class="title" style="display:none;">页面</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/8309a5b876fc95e3/" class="nav-link">HTML</a></li><li class="dropdown-item"><!----> <a href="/pages/0a83b083bdf257cb/" class="nav-link">CSS</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技术" class="dropdown-title"><a href="/technology/" class="link-title">技术</a> <span class="title" style="display:none;">技术</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/9a7ee40fc232253e/" class="nav-link">技术文档</a></li><li class="dropdown-item"><!----> <a href="/pages/4c778760be26d8b3/" class="nav-link">GitHub技巧</a></li><li class="dropdown-item"><!----> <a href="/pages/117708e0af7f0bd9/" class="nav-link">Nodejs</a></li><li class="dropdown-item"><!----> <a href="/pages/41f87d890d0a02af/" class="nav-link">博客搭建</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><a href="/more/" class="link-title">更多</a> <span class="title" style="display:none;">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/f2a556/" class="nav-link">学习</a></li><li class="dropdown-item"><!----> <a href="/pages/aea6571b7a8bae86/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/pages/2d615df9a36a98ed/" class="nav-link">心情杂货</a></li><li class="dropdown-item"><!----> <a href="/pages/baaa02/" class="nav-link">实用技巧</a></li><li class="dropdown-item"><!----> <a href="/friends/" class="nav-link">友情链接</a></li></ul></div></div><div class="nav-item"><a href="/about/" class="nav-link">关于</a></div><div class="nav-item"><a href="/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/linxi0551/linxi0551.github.io" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>我做了一个手写春联小网页，祝大家虎年暴富</span> <!----></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06970110><div class="articleInfo" data-v-06970110><!----> <div class="info" data-v-06970110><div title="作者" class="author iconfont icon-touxiang" data-v-06970110><a href="https://github.com/xugaoyi" target="_blank" title="作者" class="beLink" data-v-06970110>xugaoyi</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06970110><a href="javascript:;" data-v-06970110>2022-01-28</a></div> <div title="分类" class="date iconfont icon-wenjian" data-v-06970110><a href="/categories/?category=%E9%9A%8F%E7%AC%94" data-v-06970110>随笔 </a></div></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">我做了一个手写春联小网页，祝大家虎年暴富<span class="title-tag">原创</span></h1>  <div class="theme-vdoing-content content__default"><p>手写春联：<a href="https://cl.xugaoyi.com/" target="_blank" rel="noopener noreferrer">https://cl.xugaoyi.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="前言"><a href="#前言" class="header-anchor">#</a> 前言</h3> <p>虎年春节快到了，首先祝大家新年快乐，轻松暴富。
最近在网上经常看到生成春联的文章，不过这些小demo要么功能简陋,要么UI特别‘程序员’，满足不了我挑剔的眼光。干脆我自己做一个吧，顺便简单体验一下vite+vue3。（因为页面相对简单，vue组件风格还是使用选项式api，重点还是想把产品快速做出来。）</p> <p align="center"><img src="https://img-blog.csdnimg.cn/img_convert/185c88180b87ac7277072280a0c144ce.png" width="500" style="cursor:zoom-in;"></p> <h3 id="产品构思"><a href="#产品构思" class="header-anchor">#</a> 产品构思</h3> <p>包含<code>手写春节</code>和<code>生成春联</code>两大功能：</p> <ul><li><p><strong>手写春联</strong></p> <ul><li>模拟用笔写字的字迹</li> <li>选择画笔颜色</li> <li>调整画笔大小</li> <li>清空画布</li> <li>撤回笔画</li> <li>切换上、下联、横批、福字</li> <li>随机切换对联提示</li> <li>预览图片和下载</li> <li>贴春联海报和下载</li></ul></li> <li><p><strong>生成模式</strong></p> <ul><li>选择画笔颜色</li> <li>挑选生成的对联</li> <li>输入对联</li> <li>随机切换对联</li> <li>贴春联海报和下载</li></ul></li> <li><p><strong>其他</strong></p> <ul><li>快速切换模式按钮</li> <li>可控制的背景音乐</li> <li>微信分享网页</li></ul></li></ul> <h3 id="设计"><a href="#设计" class="header-anchor">#</a> 设计</h3> <p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/392f2036c0ce4c97b8562e6f17606491~tplv-k3u1fbpfcp-watermark.image?" alt="222.jpg"></p> <h3 id="开发"><a href="#开发" class="header-anchor">#</a> 开发</h3> <ul><li><strong>技术栈</strong> <ul><li>vite (打包&amp;构建)</li> <li>vue3 (页面开发)</li> <li>vant（ui）</li> <li>sass (css)</li> <li><a href="https://github.com/linjc/smooth-signature" target="_blank" rel="noopener noreferrer">smooth-signature.js (带笔锋手写库)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;wrap&quot;</span> <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;'mode-' + mode&quot;</span> @touchstart<span class="token operator">=</span><span class="token string">&quot;handleTouchstart&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 切换模式按钮 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;toggle-mode-btn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;toggleMode&quot;</span><span class="token operator">&gt;</span>
      <span class="token punctuation">{</span><span class="token punctuation">{</span> mode <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">?</span> <span class="token string">'手写'</span> <span class="token operator">:</span> <span class="token string">'生成'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
      <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;iconfont icon-qiehuan&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 工具栏 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div
      <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;actions&quot;</span>
      <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ borderTopRightRadius: colorListVisibility ? '0' : '5px' }&quot;</span>
    <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 手写模式显示 <span class="token operator">--</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>template v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;mode === 1&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 调色板 <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;palette btn-block&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>div
            <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;cur-color&quot;</span>
            @click<span class="token operator">=</span><span class="token string">&quot;togglePalette&quot;</span>
            <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ background: colorList[curColorIndex] }&quot;</span>
          <span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>ul <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;colorList&quot;</span> v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">&quot;colorListVisibility&quot;</span><span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>li
              v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in colorList&quot;</span>
              <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;item&quot;</span>
              <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ background: item }&quot;</span>
              @click<span class="token operator">=</span><span class="token string">&quot;selectColor(index)&quot;</span>
            <span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 滑块 <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;slider-box btn-block&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>van<span class="token operator">-</span>slider
            v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">&quot;progress&quot;</span>
            vertical
            @change<span class="token operator">=</span><span class="token string">&quot;changeProgress&quot;</span>
            bar<span class="token operator">-</span>height<span class="token operator">=</span><span class="token string">&quot;28&quot;</span>
            active<span class="token operator">-</span>color<span class="token operator">=</span><span class="token string">&quot;transparent&quot;</span>
            <span class="token operator">:</span>min<span class="token operator">=</span><span class="token string">&quot;50&quot;</span>
            <span class="token operator">:</span>max<span class="token operator">=</span><span class="token string">&quot;150&quot;</span>
          <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>template #button<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;custom-button&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>slider<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 清空 <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;handleClear&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;iconfont icon-lajitong&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 撤销 <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;handleUndo&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;iconfont icon-fanhui&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;line&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 切换画布的按钮 <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div
          <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn&quot;</span>
          <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;{ 'cur-active': curCanvasIndex === index }&quot;</span>
          v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in canvasList&quot;</span>
          <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;item.name&quot;</span>
          @click<span class="token operator">=</span><span class="token string">&quot;changeCanvas(index)&quot;</span>
        <span class="token operator">&gt;</span>
          <span class="token punctuation">{</span><span class="token punctuation">{</span> item<span class="token punctuation">.</span>name <span class="token punctuation">}</span><span class="token punctuation">}</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;line&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn prominent&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;handlePreview&quot;</span><span class="token operator">&gt;</span>预览<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn prominent&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;openPosters&quot;</span><span class="token operator">&gt;</span>贴联<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

      <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 生成模式显示 <span class="token operator">--</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>template v<span class="token operator">-</span><span class="token keyword">else</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 选颜色 <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div
          <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;color-list-quick&quot;</span>
          <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;{ active: curColorIndex === index }&quot;</span>
          v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in colorList&quot;</span>
          <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;item&quot;</span>
          <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ background: item }&quot;</span>
          @click<span class="token operator">=</span><span class="token string">&quot;selectColor(index)&quot;</span>
        <span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;line&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;showPickBox = true&quot;</span><span class="token operator">&gt;</span>挑选<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;showInputBox = true&quot;</span><span class="token operator">&gt;</span>输入<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 挑选对联弹窗 <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>van<span class="token operator">-</span>action<span class="token operator">-</span>sheet v<span class="token operator">-</span>model<span class="token operator">:</span>show<span class="token operator">=</span><span class="token string">&quot;showPickBox&quot;</span> title<span class="token operator">=</span><span class="token string">&quot;请挑选对联&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>ul <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;duilian-list&quot;</span><span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>li
              v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in duilianList&quot;</span>
              <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;index&quot;</span>
              @click<span class="token operator">=</span><span class="token string">&quot;handlePickDuilian(item)&quot;</span>
            <span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>span<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> item<span class="token punctuation">.</span>shang <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>span
              <span class="token operator">&gt;</span>， <span class="token operator">&lt;</span>span<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> item<span class="token punctuation">.</span>xia <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>span
              <span class="token operator">&gt;</span>。
              <span class="token operator">&lt;</span>span<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> item<span class="token punctuation">.</span>heng <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>action<span class="token operator">-</span>sheet<span class="token operator">&gt;</span>

        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 输入对联弹窗 <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>van<span class="token operator">-</span>action<span class="token operator">-</span>sheet v<span class="token operator">-</span>model<span class="token operator">:</span>show<span class="token operator">=</span><span class="token string">&quot;showInputBox&quot;</span> title<span class="token operator">=</span><span class="token string">&quot;请输入对联&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>van<span class="token operator">-</span>form @submit<span class="token operator">=</span><span class="token string">&quot;handleSubmitInput&quot;</span><span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>van<span class="token operator">-</span>cell<span class="token operator">-</span>group inset<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>van<span class="token operator">-</span>field
                v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">&quot;shanglian&quot;</span>
                name<span class="token operator">=</span><span class="token string">&quot;shang&quot;</span>
                label<span class="token operator">=</span><span class="token string">&quot;上联&quot;</span>
                placeholder<span class="token operator">=</span><span class="token string">&quot;上联&quot;</span>
                <span class="token operator">:</span>rules<span class="token operator">=</span>&quot;<span class="token punctuation">[</span>
                  <span class="token punctuation">{</span>
                    <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'请输入7位汉字上联'</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">pattern</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[\u4e00-\u9fa5]{7}$</span><span class="token regex-delimiter">/</span></span>
                  <span class="token punctuation">}</span>
                <span class="token punctuation">]</span>&quot;
                clearable
              <span class="token operator">/</span><span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>van<span class="token operator">-</span>field
                v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">&quot;xialian&quot;</span>
                name<span class="token operator">=</span><span class="token string">&quot;xia&quot;</span>
                label<span class="token operator">=</span><span class="token string">&quot;下联&quot;</span>
                placeholder<span class="token operator">=</span><span class="token string">&quot;下联&quot;</span>
                <span class="token operator">:</span>rules<span class="token operator">=</span>&quot;<span class="token punctuation">[</span>
                  <span class="token punctuation">{</span>
                    <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'请输入7位汉字下联'</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">pattern</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[\u4e00-\u9fa5]{7}$</span><span class="token regex-delimiter">/</span></span>
                  <span class="token punctuation">}</span>
                <span class="token punctuation">]</span>&quot;
                clearable
              <span class="token operator">/</span><span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>van<span class="token operator">-</span>field
                v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">&quot;hengpi&quot;</span>
                name<span class="token operator">=</span><span class="token string">&quot;heng&quot;</span>
                label<span class="token operator">=</span><span class="token string">&quot;横批&quot;</span>
                placeholder<span class="token operator">=</span><span class="token string">&quot;横批&quot;</span>
                <span class="token operator">:</span>rules<span class="token operator">=</span>&quot;<span class="token punctuation">[</span>
                  <span class="token punctuation">{</span>
                    <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'请输入4位汉字横批'</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">pattern</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[\u4e00-\u9fa5]{4}$</span><span class="token regex-delimiter">/</span></span>
                  <span class="token punctuation">}</span>
                <span class="token punctuation">]</span>&quot;
                clearable
              <span class="token operator">/</span><span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>cell<span class="token operator">-</span>group<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>div style<span class="token operator">=</span><span class="token string">&quot;margin: 16px&quot;</span><span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>van<span class="token operator">-</span>button
                round
                block
                type<span class="token operator">=</span><span class="token string">&quot;primary&quot;</span>
                native<span class="token operator">-</span>type<span class="token operator">=</span><span class="token string">&quot;submit&quot;</span>
                color<span class="token operator">=</span><span class="token string">&quot;linear-gradient(to right, #ff6034, #c33825)&quot;</span>
              <span class="token operator">&gt;</span>
                完成
              <span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>button<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>form<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>action<span class="token operator">-</span>sheet<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 模式<span class="token number">1</span><span class="token operator">-</span>春联画布 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div
      v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">&quot;mode === 1&quot;</span>
      v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in canvasList&quot;</span>
      <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;item.name&quot;</span>
    <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>canvas
        <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;canvas&quot;</span>
        <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;item.className&quot;</span>
        v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">&quot;curCanvasIndex === index&quot;</span>
        <span class="token operator">:</span>style<span class="token operator">=</span>&quot;<span class="token punctuation">{</span>
          <span class="token literal-property property">marginTop</span><span class="token operator">:</span>
            item<span class="token punctuation">.</span>height <span class="token operator">&lt;</span> clientHeight
              <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token punctuation">(</span>clientHeight <span class="token operator">-</span> item<span class="token punctuation">.</span>height<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span>
              <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
          <span class="token literal-property property">marginLeft</span><span class="token operator">:</span>
            item<span class="token punctuation">.</span>width <span class="token operator">&lt;</span> clientWidth <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token punctuation">(</span>clientWidth <span class="token operator">-</span> item<span class="token punctuation">.</span>width<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token number">0</span>
        <span class="token punctuation">}</span>&quot;
      <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 模式<span class="token number">2</span><span class="token operator">-</span>春联画布 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">&quot;mode === 2&quot;</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;canvas-mode-2&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;row&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>canvas id<span class="token operator">=</span><span class="token string">&quot;canvas-top&quot;</span> <span class="token operator">:</span>width<span class="token operator">=</span><span class="token string">&quot;200 * scale&quot;</span> <span class="token operator">:</span>height<span class="token operator">=</span><span class="token string">&quot;60 * scale&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;row&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>canvas id<span class="token operator">=</span><span class="token string">&quot;canvas-left&quot;</span> <span class="token operator">:</span>width<span class="token operator">=</span><span class="token string">&quot;60 * scale&quot;</span> <span class="token operator">:</span>height<span class="token operator">=</span><span class="token string">&quot;364 * scale&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>canvas id<span class="token operator">=</span><span class="token string">&quot;canvas-right&quot;</span> <span class="token operator">:</span>width<span class="token operator">=</span><span class="token string">&quot;60 * scale&quot;</span> <span class="token operator">:</span>height<span class="token operator">=</span><span class="token string">&quot;364 * scale&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 贴春联按钮 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn-posters&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;openPosters&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> footer<span class="token operator">-</span>当前对联提示 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>footer v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;duilian.shang&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;refresh-btn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;handleRefresh(true)&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;iconfont icon-shuaxin&quot;</span> <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;{ rotate: isRotate }&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>dl <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;duilian&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>dt<span class="token operator">&gt;</span>对联<span class="token operator">&lt;</span><span class="token operator">/</span>dt<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>dd<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> duilian<span class="token punctuation">.</span>shang <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> duilian<span class="token punctuation">.</span>xia <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>dd<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>dl<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>dl<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>dt<span class="token operator">&gt;</span>横批<span class="token operator">&lt;</span><span class="token operator">/</span>dt<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>dd<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> duilian<span class="token punctuation">.</span>heng <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>dd<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>dl<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>footer<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 分享按钮 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;share-btn&quot;</span> v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;isShowShareBtn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;isShowShareTip = true&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;iconfont icon-fenxiang&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 微信分享提示语 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div
      <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;share-tip&quot;</span>
      v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;isShowShareTip&quot;</span>
      @click<span class="token operator">=</span><span class="token string">&quot;isShowShareTip = false&quot;</span>
    <span class="token operator">&gt;</span>
      点击右上角把这个工具分享给朋友
      <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;hand&quot;</span><span class="token operator">&gt;</span>👆<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 保存tip <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>p v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;isShowTip&quot;</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;download-tip&quot;</span><span class="token operator">&gt;</span><span class="token operator">*</span>长按图片保存或转发<span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 版权 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;copyright&quot;</span><span class="token operator">&gt;</span>公众号「有趣研究社」 ©版权所有<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 载入图片元素，用于快速贴图使用<span class="token punctuation">,</span> 注意设置crossorigin<span class="token operator">=</span><span class="token string">&quot;anonymous&quot;</span>解决跨域 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;isReadImages&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>img
        crossorigin<span class="token operator">=</span><span class="token string">&quot;anonymous&quot;</span>
        v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in bgList&quot;</span>
        <span class="token operator">:</span>src<span class="token operator">=</span><span class="token string">&quot;item&quot;</span>
        <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;item&quot;</span>
        <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;hide-img&quot;</span>
        <span class="token operator">:</span>id<span class="token operator">=</span><span class="token string">&quot;`bg-img-` + index&quot;</span>
      <span class="token operator">/</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>img
        crossorigin<span class="token operator">=</span><span class="token string">&quot;anonymous&quot;</span>
        <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;hide-img&quot;</span>
        id<span class="token operator">=</span><span class="token string">&quot;qrcode&quot;</span>
        src<span class="token operator">=</span><span class="token string">&quot;https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store2@master/img/qrcode.zul0pldsuao.png&quot;</span>
      <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 背景音乐 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>audio
      src<span class="token operator">=</span><span class="token string">&quot;https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store2@master/cjxq.mp3&quot;</span>
      id<span class="token operator">=</span><span class="token string">&quot;bgm&quot;</span>
      ref<span class="token operator">=</span><span class="token string">&quot;bgm&quot;</span>
      loop
    <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div
      <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;play-btn&quot;</span>
      <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;{ paused: !isPlay }&quot;</span>
      ref<span class="token operator">=</span><span class="token string">&quot;playBtn&quot;</span>
      @click<span class="token operator">=</span><span class="token string">&quot;handlePlay&quot;</span>
    <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;iconfont icon-yinle&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

  <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;body-bg-img&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ImagePreview<span class="token punctuation">,</span> Notify <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vant'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> isWX<span class="token punctuation">,</span> isMobile <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils'</span>
<span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'@/components/Button.vue'</span>
<span class="token keyword">import</span> dl <span class="token keyword">from</span> <span class="token string">'@/assets/img/yh/dl.jpeg'</span>
<span class="token keyword">import</span> hp <span class="token keyword">from</span> <span class="token string">'@/assets/img/yh/hp.jpeg'</span>
<span class="token keyword">import</span> fz <span class="token keyword">from</span> <span class="token string">'@/assets/img/yh/fz.png'</span>

<span class="token comment">// 对联数据</span>
<span class="token keyword">import</span> duilianList <span class="token keyword">from</span> <span class="token string">'@/mock/duilian'</span>

<span class="token keyword">const</span> <span class="token constant">PROPORTION</span> <span class="token operator">=</span> <span class="token number">0.37</span> <span class="token comment">// 图片缩小比例</span>
<span class="token keyword">const</span> <span class="token constant">INSTANTIATE_NAME</span> <span class="token operator">=</span> <span class="token string">'signature'</span> <span class="token comment">// 实例名称</span>
<span class="token keyword">const</span> <span class="token constant">MIN_WIDTH</span> <span class="token operator">=</span> <span class="token number">3</span> <span class="token comment">// 画笔最小宽</span>
<span class="token keyword">const</span> <span class="token constant">MAX_WIDTH</span> <span class="token operator">=</span> <span class="token number">12</span> <span class="token comment">// 画笔最大宽</span>

<span class="token comment">// 海报背景图大小</span>
<span class="token keyword">const</span> <span class="token constant">BG_WIDTH</span> <span class="token operator">=</span> <span class="token number">750</span>
<span class="token keyword">const</span> <span class="token constant">BG_HEIGHT</span> <span class="token operator">=</span> <span class="token number">1448</span>

<span class="token comment">// 贴图定位和大小</span>
<span class="token keyword">const</span> <span class="token constant">POSITION</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">57</span><span class="token punctuation">,</span> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">510</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">90</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">546</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 上联</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">600</span><span class="token punctuation">,</span> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">510</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">90</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">546</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 下联</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">225</span><span class="token punctuation">,</span> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">345</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">90</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 横幅</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">460</span><span class="token punctuation">,</span> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">450</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">130</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">130</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 福字</span>
<span class="token punctuation">]</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;Home&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    Button
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      duilianList<span class="token punctuation">,</span>
      <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token function">Number</span><span class="token punctuation">(</span>localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'mode'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// 1 手写，2 生成</span>
      <span class="token literal-property property">curCanvasIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 显示哪个画布</span>
      <span class="token literal-property property">progress</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token comment">// 画笔大小的刻度</span>
      <span class="token literal-property property">clientWidth</span><span class="token operator">:</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientWidth<span class="token punctuation">,</span>
      <span class="token literal-property property">clientHeight</span><span class="token operator">:</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">,</span>
      <span class="token literal-property property">canvasList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'上联'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'canvas-a'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">bgImage</span><span class="token operator">:</span> dl<span class="token punctuation">,</span>
          <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">600</span> <span class="token operator">*</span> <span class="token constant">PROPORTION</span><span class="token punctuation">,</span>
          <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">3640</span> <span class="token operator">*</span> <span class="token constant">PROPORTION</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'下联'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'canvas-b'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">bgImage</span><span class="token operator">:</span> dl<span class="token punctuation">,</span>
          <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">600</span> <span class="token operator">*</span> <span class="token constant">PROPORTION</span><span class="token punctuation">,</span>
          <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">3640</span> <span class="token operator">*</span> <span class="token constant">PROPORTION</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'横批'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'canvas-c'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">bgImage</span><span class="token operator">:</span> hp<span class="token punctuation">,</span>
          <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">2000</span> <span class="token operator">*</span> <span class="token constant">PROPORTION</span><span class="token punctuation">,</span>
          <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">600</span> <span class="token operator">*</span> <span class="token constant">PROPORTION</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'福字'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'canvas-d'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">bgImage</span><span class="token operator">:</span> fz<span class="token punctuation">,</span>
          <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">366</span><span class="token punctuation">,</span>
          <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">366</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">colorList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'#000000'</span><span class="token punctuation">,</span> <span class="token string">'#ffd800'</span><span class="token punctuation">,</span> <span class="token string">'#e8bd48'</span><span class="token punctuation">,</span> <span class="token string">'#ddc08c'</span><span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">curColorIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
      <span class="token literal-property property">colorListVisibility</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 画布颜色选择列表可见性</span>
      <span class="token literal-property property">isShowTip</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示底部提示语</span>
      <span class="token literal-property property">duilian</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 当前对联文本对象</span>
      <span class="token literal-property property">isRotate</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 刷新icon旋转</span>
      <span class="token literal-property property">bgList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">'https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/1.4j8qpdnq80i0.jpeg'</span><span class="token punctuation">,</span>
        <span class="token string">'https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/4.4460an8ag5o0.jpeg'</span><span class="token punctuation">,</span>
        <span class="token string">'https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/5.3axtl4xpvy00.jpeg'</span><span class="token punctuation">,</span>
        <span class="token string">'https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/6.2lnbphdqjaq0.jpeg'</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">isReadImages</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 延迟加载图片用</span>
      <span class="token literal-property property">isShowShareBtn</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示分享按钮</span>
      <span class="token literal-property property">isShowShareTip</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示分享提示语</span>
      <span class="token literal-property property">isPlay</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否在播放</span>

      <span class="token comment">// 模式2</span>
      <span class="token literal-property property">canvasTop</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// 横批</span>
      <span class="token literal-property property">canvasLeft</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// 上联</span>
      <span class="token literal-property property">canvasRight</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// 下联</span>
      <span class="token literal-property property">imgObj1</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// 横批图片对象</span>
      <span class="token literal-property property">imgObj2</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// 上下联图片对象</span>
      <span class="token literal-property property">scale</span><span class="token operator">:</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>devicePixelRatio <span class="token operator">||</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 用于增加画布清晰度</span>
      <span class="token literal-property property">showPickBox</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 挑选对联的弹框</span>
      <span class="token literal-property property">showInputBox</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 输入对联的弹框</span>
      <span class="token literal-property property">shanglian</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 输入的上联</span>
      <span class="token literal-property property">xialian</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 输入的下联</span>
      <span class="token literal-property property">hengpi</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 输入的横批</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 模式1-当前画布实例</span>
    <span class="token function">curCanvasInstantiate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">[</span><span class="token constant">INSTANTIATE_NAME</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasIndex<span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 微信浏览器显示分享按钮</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>isShowShareBtn <span class="token operator">=</span> <span class="token function">isWX</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">Notify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'warning'</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'请用移动端打开获得最佳体验'</span><span class="token punctuation">,</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">6000</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initMode1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// 初始化对联提示</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initMode2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// 按钮添加激活时发光效果class</span>
    <span class="token keyword">const</span> btnEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.btn,.btn-block'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    btnEl<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      item<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'touchstart'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        item<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'btn-active'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      item<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'touchend'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          item<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'btn-active'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token comment">// 延迟加载贴图背景</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>isReadImages <span class="token operator">=</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 切换画笔颜色</span>
    <span class="token function">curColorIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasInstantiate<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>colorList<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>curColorIndex<span class="token punctuation">]</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>mode <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">refreshDuilian</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 切换画布时应用当前画笔颜色和大小</span>
    <span class="token function">curCanvasIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasInstantiate<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>colorList<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>curColorIndex<span class="token punctuation">]</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleChangeSize</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      window<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">initMode1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> colorList<span class="token punctuation">,</span> curColorIndex <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">width</span><span class="token operator">:</span> item<span class="token punctuation">.</span>width<span class="token punctuation">,</span>
          <span class="token literal-property property">height</span><span class="token operator">:</span> item<span class="token punctuation">.</span>height<span class="token punctuation">,</span>
          <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token constant">MIN_WIDTH</span><span class="token punctuation">,</span> <span class="token comment">// 画笔最小宽度(px)</span>
          <span class="token literal-property property">maxWidth</span><span class="token operator">:</span> <span class="token constant">MAX_WIDTH</span><span class="token punctuation">,</span> <span class="token comment">// 画笔最大宽度</span>
          <span class="token literal-property property">minSpeed</span><span class="token operator">:</span> <span class="token number">1.8</span><span class="token punctuation">,</span> <span class="token comment">// 画笔达到最小宽度所需最小速度(px/ms)，取值范围1.0-10.0</span>
          <span class="token literal-property property">color</span><span class="token operator">:</span> colorList<span class="token punctuation">[</span>curColorIndex<span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token comment">// 新增的配置</span>
          <span class="token literal-property property">bgImage</span><span class="token operator">:</span> item<span class="token punctuation">.</span>bgImage<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>

        <span class="token keyword">this</span><span class="token punctuation">[</span><span class="token constant">INSTANTIATE_NAME</span> <span class="token operator">+</span> index<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SmoothSignature</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.'</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>className<span class="token punctuation">)</span><span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token function">initMode2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'canvas-top'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'canvas-left'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'canvas-right'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span>

      <span class="token comment">// 设字体样式</span>
      <span class="token keyword">const</span> font <span class="token operator">=</span> <span class="token string">&quot;36px xs, cursive&quot;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop<span class="token punctuation">.</span>font <span class="token operator">=</span> font
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft<span class="token punctuation">.</span>font <span class="token operator">=</span> font
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight<span class="token punctuation">.</span>font <span class="token operator">=</span> font

      <span class="token comment">// 增强清晰度</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> scale <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop<span class="token punctuation">.</span><span class="token function">scale</span><span class="token punctuation">(</span>scale<span class="token punctuation">,</span> scale<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft<span class="token punctuation">.</span><span class="token function">scale</span><span class="token punctuation">(</span>scale<span class="token punctuation">,</span> scale<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight<span class="token punctuation">.</span><span class="token function">scale</span><span class="token punctuation">(</span>scale<span class="token punctuation">,</span> scale<span class="token punctuation">)</span><span class="token punctuation">;</span>

      <span class="token comment">// 设背景图</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>imgObj1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>imgObj1<span class="token punctuation">.</span>src <span class="token operator">=</span> hp
      <span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2<span class="token punctuation">.</span>src <span class="token operator">=</span> dl
      <span class="token keyword">this</span><span class="token punctuation">.</span>imgObj1<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// 贴背景</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>imgObj1<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">)</span>

        <span class="token comment">// 字体加载完成后</span>
        document<span class="token punctuation">.</span>fonts<span class="token punctuation">.</span>ready<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleTopFillText</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// 贴背景</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">364</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">364</span><span class="token punctuation">)</span>

        <span class="token comment">// 字体加载完成后</span>
        document<span class="token punctuation">.</span>fonts<span class="token punctuation">.</span>ready<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleLRFillText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>duilian<span class="token punctuation">.</span>shang<span class="token punctuation">)</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleLRFillText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>duilian<span class="token punctuation">.</span>xia<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 模式2-刷新对联</span>
    <span class="token function">refreshDuilian</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>imgObj1<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">364</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">364</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleTopFillText</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleLRFillText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>duilian<span class="token punctuation">.</span>shang<span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleLRFillText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>duilian<span class="token punctuation">.</span>xia<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 模式2-贴横批</span>
    <span class="token function">handleTopFillText</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 贴文本</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>colorList<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>curColorIndex<span class="token punctuation">]</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>duilian<span class="token punctuation">.</span>heng<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>duilian<span class="token punctuation">.</span>heng<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> left <span class="token operator">=</span> <span class="token number">42</span> <span class="token operator">*</span> <span class="token punctuation">(</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">22</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> left<span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 模式2-贴上下联</span>
    <span class="token function">handleLRFillText</span><span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> text</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>colorList<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>curColorIndex<span class="token punctuation">]</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        text<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> top <span class="token operator">=</span> <span class="token number">50</span> <span class="token operator">*</span> <span class="token punctuation">(</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">8</span>
          ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> top<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 切换模式</span>
    <span class="token function">toggleMode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>mode <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>mode <span class="token operator">=</span> <span class="token number">2</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">refreshDuilian</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>mode <span class="token operator">=</span> <span class="token number">1</span>
      <span class="token punctuation">}</span>
      localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'mode'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>mode<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 打开调色板</span>
    <span class="token function">togglePalette</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>colorListVisibility <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>colorListVisibility
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 关闭调色板</span>
    <span class="token function">handleTouchstart</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 不是点击选择颜色时</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>path<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">?.</span>classList<span class="token operator">?.</span>value <span class="token operator">!==</span> <span class="token string">'colorList'</span> <span class="token operator">&amp;&amp;</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>classList<span class="token operator">?.</span>value <span class="token operator">!==</span> <span class="token string">'cur-color'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>colorListVisibility <span class="token operator">=</span> <span class="token boolean">false</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 选择颜色</span>
    <span class="token function">selectColor</span><span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>curColorIndex <span class="token operator">=</span> index
      <span class="token keyword">this</span><span class="token punctuation">.</span>colorListVisibility <span class="token operator">=</span> <span class="token boolean">false</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 切换画布</span>
    <span class="token function">changeCanvas</span><span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasIndex <span class="token operator">=</span> index
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 清空画布</span>
    <span class="token function">handleClear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasInstantiate<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 撤销笔画</span>
    <span class="token function">handleUndo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasInstantiate<span class="token punctuation">.</span><span class="token function">undo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 预览</span>
    <span class="token function">handlePreview</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">showTopTip</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>isShowTip <span class="token operator">=</span> <span class="token boolean">true</span>
      <span class="token keyword">const</span> _this <span class="token operator">=</span> <span class="token keyword">this</span>
      <span class="token function">ImagePreview</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">images</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getImageList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token literal-property property">closeable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">startPosition</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasIndex<span class="token punctuation">,</span>
        <span class="token function">onClose</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          _this<span class="token punctuation">.</span>isShowTip <span class="token operator">=</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 打开海报预览</span>
    <span class="token function">openPosters</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 创建画布</span>
      <span class="token keyword">const</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'canvas'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      canvas<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token constant">BG_WIDTH</span>
      canvas<span class="token punctuation">.</span>height <span class="token operator">=</span> <span class="token constant">BG_HEIGHT</span>
      <span class="token keyword">const</span> ctx <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> resultImageList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

      <span class="token comment">// 是否隐藏福字</span>
      <span class="token keyword">const</span> isHideFu <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">[</span><span class="token constant">INSTANTIATE_NAME</span> <span class="token operator">+</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">isEmpty</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>bgList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// 贴背景图</span>
        ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'bg-img-'</span> <span class="token operator">+</span> index<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token constant">BG_WIDTH</span><span class="token punctuation">,</span> <span class="token constant">BG_HEIGHT</span><span class="token punctuation">)</span>

        <span class="token comment">// 贴对联</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>mode <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>canvasList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">3</span> <span class="token operator">&amp;&amp;</span> isHideFu<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
            <span class="token keyword">const</span> dlCanvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.'</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>className<span class="token punctuation">)</span>
            <span class="token keyword">const</span> <span class="token punctuation">{</span> left<span class="token punctuation">,</span> top<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token constant">POSITION</span><span class="token punctuation">[</span>index<span class="token punctuation">]</span>
            ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>dlCanvas<span class="token punctuation">,</span> left<span class="token punctuation">,</span> top<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height<span class="token punctuation">)</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
          <span class="token punctuation">[</span><span class="token string">'canvas-left'</span><span class="token punctuation">,</span> <span class="token string">'canvas-right'</span><span class="token punctuation">,</span> <span class="token string">'canvas-top'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">const</span> dlCanvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
            <span class="token keyword">const</span> <span class="token punctuation">{</span> left<span class="token punctuation">,</span> top<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token constant">POSITION</span><span class="token punctuation">[</span>index<span class="token punctuation">]</span>
            ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>dlCanvas<span class="token punctuation">,</span> left<span class="token punctuation">,</span> top<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height<span class="token punctuation">)</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>

        <span class="token comment">// 贴二维码</span>
        ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;qrcode&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">,</span> <span class="token number">1280</span><span class="token punctuation">,</span> <span class="token number">580</span><span class="token punctuation">,</span> <span class="token number">136</span><span class="token punctuation">)</span>

        <span class="token comment">// 贴文本</span>
        ctx<span class="token punctuation">.</span>font <span class="token operator">=</span> <span class="token string">&quot;18px sans-serif&quot;</span>
        ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token string">&quot;#666666&quot;</span>
        ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span><span class="token string">'©公众号「有趣研究社」'</span><span class="token punctuation">,</span> <span class="token number">550</span><span class="token punctuation">,</span> <span class="token number">1420</span><span class="token punctuation">)</span>

        <span class="token comment">// 导出图片</span>
        resultImageList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>canvas<span class="token punctuation">.</span><span class="token function">toDataURL</span><span class="token punctuation">(</span><span class="token string">'image/jpeg'</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>

      <span class="token comment">// 打开图片预览</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>isShowTip <span class="token operator">=</span> <span class="token boolean">true</span>
      <span class="token keyword">const</span> _this <span class="token operator">=</span> <span class="token keyword">this</span>
      <span class="token function">ImagePreview</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">images</span><span class="token operator">:</span> resultImageList<span class="token punctuation">,</span>
        <span class="token literal-property property">closeable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token function">onClose</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          _this<span class="token punctuation">.</span>isShowTip <span class="token operator">=</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">showTopTip</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 弹出顶部提示语</span>
    <span class="token function">showTopTip</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>sessionStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'showTip'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        sessionStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'showTip'</span><span class="token punctuation">,</span> <span class="token string">'true'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">Notify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'长按图片可保存到本地'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#c33825'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token string">'#eed3ae'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 获取对联图片列表</span>
    <span class="token function">getImageList</span><span class="token punctuation">(</span>type <span class="token operator">=</span> <span class="token string">'image/png'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> imageList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>canvasList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// `福`字必须是png格式</span>
          type <span class="token operator">=</span> <span class="token string">'image/png'</span>
        <span class="token punctuation">}</span>
        imageList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">[</span><span class="token constant">INSTANTIATE_NAME</span> <span class="token operator">+</span> index<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toDataURL</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">return</span> imageList
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 进度改变时</span>
    <span class="token function">changeProgress</span><span class="token punctuation">(</span><span class="token parameter">progress</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>progress <span class="token operator">=</span> progress
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleChangeSize</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 调整画笔大小</span>
    <span class="token function">handleChangeSize</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> progress <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasInstantiate<span class="token punctuation">.</span>minWidth <span class="token operator">=</span> <span class="token constant">MIN_WIDTH</span> <span class="token operator">*</span> progress <span class="token operator">/</span> <span class="token number">100</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasInstantiate<span class="token punctuation">.</span>maxWidth <span class="token operator">=</span> <span class="token constant">MAX_WIDTH</span> <span class="token operator">*</span> progress <span class="token operator">/</span> <span class="token number">100</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 刷新对联</span>
    <span class="token function">handleRefresh</span><span class="token punctuation">(</span><span class="token parameter">rotate</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>duilian <span class="token operator">=</span> duilianList<span class="token punctuation">[</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> duilianList<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">]</span>

      <span class="token keyword">if</span> <span class="token punctuation">(</span>rotate<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>mode <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">refreshDuilian</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token comment">// 使icon旋转</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>isRotate <span class="token operator">=</span> <span class="token boolean">true</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>isRotate <span class="token operator">=</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 播放背景音乐</span>
    <span class="token function">handlePlay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> bgm <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs
      <span class="token keyword">if</span> <span class="token punctuation">(</span>bgm<span class="token punctuation">.</span>paused<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        bgm<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>isPlay <span class="token operator">=</span> <span class="token boolean">true</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        bgm<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>isPlay <span class="token operator">=</span> <span class="token boolean">false</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 完成输入对联</span>
    <span class="token function">handleSubmitInput</span><span class="token punctuation">(</span><span class="token parameter">values</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>duilian <span class="token operator">=</span> values
      <span class="token keyword">this</span><span class="token punctuation">.</span>showInputBox <span class="token operator">=</span> <span class="token boolean">false</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">refreshDuilian</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 完成挑选对联</span>
    <span class="token function">handlePickDuilian</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>duilian <span class="token operator">=</span> item
      <span class="token keyword">this</span><span class="token punctuation">.</span>showPickBox <span class="token operator">=</span> <span class="token boolean">false</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">refreshDuilian</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br><span class="line-number">184</span><br><span class="line-number">185</span><br><span class="line-number">186</span><br><span class="line-number">187</span><br><span class="line-number">188</span><br><span class="line-number">189</span><br><span class="line-number">190</span><br><span class="line-number">191</span><br><span class="line-number">192</span><br><span class="line-number">193</span><br><span class="line-number">194</span><br><span class="line-number">195</span><br><span class="line-number">196</span><br><span class="line-number">197</span><br><span class="line-number">198</span><br><span class="line-number">199</span><br><span class="line-number">200</span><br><span class="line-number">201</span><br><span class="line-number">202</span><br><span class="line-number">203</span><br><span class="line-number">204</span><br><span class="line-number">205</span><br><span class="line-number">206</span><br><span class="line-number">207</span><br><span class="line-number">208</span><br><span class="line-number">209</span><br><span class="line-number">210</span><br><span class="line-number">211</span><br><span class="line-number">212</span><br><span class="line-number">213</span><br><span class="line-number">214</span><br><span class="line-number">215</span><br><span class="line-number">216</span><br><span class="line-number">217</span><br><span class="line-number">218</span><br><span class="line-number">219</span><br><span class="line-number">220</span><br><span class="line-number">221</span><br><span class="line-number">222</span><br><span class="line-number">223</span><br><span class="line-number">224</span><br><span class="line-number">225</span><br><span class="line-number">226</span><br><span class="line-number">227</span><br><span class="line-number">228</span><br><span class="line-number">229</span><br><span class="line-number">230</span><br><span class="line-number">231</span><br><span class="line-number">232</span><br><span class="line-number">233</span><br><span class="line-number">234</span><br><span class="line-number">235</span><br><span class="line-number">236</span><br><span class="line-number">237</span><br><span class="line-number">238</span><br><span class="line-number">239</span><br><span class="line-number">240</span><br><span class="line-number">241</span><br><span class="line-number">242</span><br><span class="line-number">243</span><br><span class="line-number">244</span><br><span class="line-number">245</span><br><span class="line-number">246</span><br><span class="line-number">247</span><br><span class="line-number">248</span><br><span class="line-number">249</span><br><span class="line-number">250</span><br><span class="line-number">251</span><br><span class="line-number">252</span><br><span class="line-number">253</span><br><span class="line-number">254</span><br><span class="line-number">255</span><br><span class="line-number">256</span><br><span class="line-number">257</span><br><span class="line-number">258</span><br><span class="line-number">259</span><br><span class="line-number">260</span><br><span class="line-number">261</span><br><span class="line-number">262</span><br><span class="line-number">263</span><br><span class="line-number">264</span><br><span class="line-number">265</span><br><span class="line-number">266</span><br><span class="line-number">267</span><br><span class="line-number">268</span><br><span class="line-number">269</span><br><span class="line-number">270</span><br><span class="line-number">271</span><br><span class="line-number">272</span><br><span class="line-number">273</span><br><span class="line-number">274</span><br><span class="line-number">275</span><br><span class="line-number">276</span><br><span class="line-number">277</span><br><span class="line-number">278</span><br><span class="line-number">279</span><br><span class="line-number">280</span><br><span class="line-number">281</span><br><span class="line-number">282</span><br><span class="line-number">283</span><br><span class="line-number">284</span><br><span class="line-number">285</span><br><span class="line-number">286</span><br><span class="line-number">287</span><br><span class="line-number">288</span><br><span class="line-number">289</span><br><span class="line-number">290</span><br><span class="line-number">291</span><br><span class="line-number">292</span><br><span class="line-number">293</span><br><span class="line-number">294</span><br><span class="line-number">295</span><br><span class="line-number">296</span><br><span class="line-number">297</span><br><span class="line-number">298</span><br><span class="line-number">299</span><br><span class="line-number">300</span><br><span class="line-number">301</span><br><span class="line-number">302</span><br><span class="line-number">303</span><br><span class="line-number">304</span><br><span class="line-number">305</span><br><span class="line-number">306</span><br><span class="line-number">307</span><br><span class="line-number">308</span><br><span class="line-number">309</span><br><span class="line-number">310</span><br><span class="line-number">311</span><br><span class="line-number">312</span><br><span class="line-number">313</span><br><span class="line-number">314</span><br><span class="line-number">315</span><br><span class="line-number">316</span><br><span class="line-number">317</span><br><span class="line-number">318</span><br><span class="line-number">319</span><br><span class="line-number">320</span><br><span class="line-number">321</span><br><span class="line-number">322</span><br><span class="line-number">323</span><br><span class="line-number">324</span><br><span class="line-number">325</span><br><span class="line-number">326</span><br><span class="line-number">327</span><br><span class="line-number">328</span><br><span class="line-number">329</span><br><span class="line-number">330</span><br><span class="line-number">331</span><br><span class="line-number">332</span><br><span class="line-number">333</span><br><span class="line-number">334</span><br><span class="line-number">335</span><br><span class="line-number">336</span><br><span class="line-number">337</span><br><span class="line-number">338</span><br><span class="line-number">339</span><br><span class="line-number">340</span><br><span class="line-number">341</span><br><span class="line-number">342</span><br><span class="line-number">343</span><br><span class="line-number">344</span><br><span class="line-number">345</span><br><span class="line-number">346</span><br><span class="line-number">347</span><br><span class="line-number">348</span><br><span class="line-number">349</span><br><span class="line-number">350</span><br><span class="line-number">351</span><br><span class="line-number">352</span><br><span class="line-number">353</span><br><span class="line-number">354</span><br><span class="line-number">355</span><br><span class="line-number">356</span><br><span class="line-number">357</span><br><span class="line-number">358</span><br><span class="line-number">359</span><br><span class="line-number">360</span><br><span class="line-number">361</span><br><span class="line-number">362</span><br><span class="line-number">363</span><br><span class="line-number">364</span><br><span class="line-number">365</span><br><span class="line-number">366</span><br><span class="line-number">367</span><br><span class="line-number">368</span><br><span class="line-number">369</span><br><span class="line-number">370</span><br><span class="line-number">371</span><br><span class="line-number">372</span><br><span class="line-number">373</span><br><span class="line-number">374</span><br><span class="line-number">375</span><br><span class="line-number">376</span><br><span class="line-number">377</span><br><span class="line-number">378</span><br><span class="line-number">379</span><br><span class="line-number">380</span><br><span class="line-number">381</span><br><span class="line-number">382</span><br><span class="line-number">383</span><br><span class="line-number">384</span><br><span class="line-number">385</span><br><span class="line-number">386</span><br><span class="line-number">387</span><br><span class="line-number">388</span><br><span class="line-number">389</span><br><span class="line-number">390</span><br><span class="line-number">391</span><br><span class="line-number">392</span><br><span class="line-number">393</span><br><span class="line-number">394</span><br><span class="line-number">395</span><br><span class="line-number">396</span><br><span class="line-number">397</span><br><span class="line-number">398</span><br><span class="line-number">399</span><br><span class="line-number">400</span><br><span class="line-number">401</span><br><span class="line-number">402</span><br><span class="line-number">403</span><br><span class="line-number">404</span><br><span class="line-number">405</span><br><span class="line-number">406</span><br><span class="line-number">407</span><br><span class="line-number">408</span><br><span class="line-number">409</span><br><span class="line-number">410</span><br><span class="line-number">411</span><br><span class="line-number">412</span><br><span class="line-number">413</span><br><span class="line-number">414</span><br><span class="line-number">415</span><br><span class="line-number">416</span><br><span class="line-number">417</span><br><span class="line-number">418</span><br><span class="line-number">419</span><br><span class="line-number">420</span><br><span class="line-number">421</span><br><span class="line-number">422</span><br><span class="line-number">423</span><br><span class="line-number">424</span><br><span class="line-number">425</span><br><span class="line-number">426</span><br><span class="line-number">427</span><br><span class="line-number">428</span><br><span class="line-number">429</span><br><span class="line-number">430</span><br><span class="line-number">431</span><br><span class="line-number">432</span><br><span class="line-number">433</span><br><span class="line-number">434</span><br><span class="line-number">435</span><br><span class="line-number">436</span><br><span class="line-number">437</span><br><span class="line-number">438</span><br><span class="line-number">439</span><br><span class="line-number">440</span><br><span class="line-number">441</span><br><span class="line-number">442</span><br><span class="line-number">443</span><br><span class="line-number">444</span><br><span class="line-number">445</span><br><span class="line-number">446</span><br><span class="line-number">447</span><br><span class="line-number">448</span><br><span class="line-number">449</span><br><span class="line-number">450</span><br><span class="line-number">451</span><br><span class="line-number">452</span><br><span class="line-number">453</span><br><span class="line-number">454</span><br><span class="line-number">455</span><br><span class="line-number">456</span><br><span class="line-number">457</span><br><span class="line-number">458</span><br><span class="line-number">459</span><br><span class="line-number">460</span><br><span class="line-number">461</span><br><span class="line-number">462</span><br><span class="line-number">463</span><br><span class="line-number">464</span><br><span class="line-number">465</span><br><span class="line-number">466</span><br><span class="line-number">467</span><br><span class="line-number">468</span><br><span class="line-number">469</span><br><span class="line-number">470</span><br><span class="line-number">471</span><br><span class="line-number">472</span><br><span class="line-number">473</span><br><span class="line-number">474</span><br><span class="line-number">475</span><br><span class="line-number">476</span><br><span class="line-number">477</span><br><span class="line-number">478</span><br><span class="line-number">479</span><br><span class="line-number">480</span><br><span class="line-number">481</span><br><span class="line-number">482</span><br><span class="line-number">483</span><br><span class="line-number">484</span><br><span class="line-number">485</span><br><span class="line-number">486</span><br><span class="line-number">487</span><br><span class="line-number">488</span><br><span class="line-number">489</span><br><span class="line-number">490</span><br><span class="line-number">491</span><br><span class="line-number">492</span><br><span class="line-number">493</span><br><span class="line-number">494</span><br><span class="line-number">495</span><br><span class="line-number">496</span><br><span class="line-number">497</span><br><span class="line-number">498</span><br><span class="line-number">499</span><br><span class="line-number">500</span><br><span class="line-number">501</span><br><span class="line-number">502</span><br><span class="line-number">503</span><br><span class="line-number">504</span><br><span class="line-number">505</span><br><span class="line-number">506</span><br><span class="line-number">507</span><br><span class="line-number">508</span><br><span class="line-number">509</span><br><span class="line-number">510</span><br><span class="line-number">511</span><br><span class="line-number">512</span><br><span class="line-number">513</span><br><span class="line-number">514</span><br><span class="line-number">515</span><br><span class="line-number">516</span><br><span class="line-number">517</span><br><span class="line-number">518</span><br><span class="line-number">519</span><br><span class="line-number">520</span><br><span class="line-number">521</span><br><span class="line-number">522</span><br><span class="line-number">523</span><br><span class="line-number">524</span><br><span class="line-number">525</span><br><span class="line-number">526</span><br><span class="line-number">527</span><br><span class="line-number">528</span><br><span class="line-number">529</span><br><span class="line-number">530</span><br><span class="line-number">531</span><br><span class="line-number">532</span><br><span class="line-number">533</span><br><span class="line-number">534</span><br><span class="line-number">535</span><br><span class="line-number">536</span><br><span class="line-number">537</span><br><span class="line-number">538</span><br><span class="line-number">539</span><br><span class="line-number">540</span><br><span class="line-number">541</span><br><span class="line-number">542</span><br><span class="line-number">543</span><br><span class="line-number">544</span><br><span class="line-number">545</span><br><span class="line-number">546</span><br><span class="line-number">547</span><br><span class="line-number">548</span><br><span class="line-number">549</span><br><span class="line-number">550</span><br><span class="line-number">551</span><br><span class="line-number">552</span><br><span class="line-number">553</span><br><span class="line-number">554</span><br><span class="line-number">555</span><br><span class="line-number">556</span><br><span class="line-number">557</span><br><span class="line-number">558</span><br><span class="line-number">559</span><br><span class="line-number">560</span><br><span class="line-number">561</span><br><span class="line-number">562</span><br><span class="line-number">563</span><br><span class="line-number">564</span><br><span class="line-number">565</span><br><span class="line-number">566</span><br><span class="line-number">567</span><br><span class="line-number">568</span><br><span class="line-number">569</span><br><span class="line-number">570</span><br><span class="line-number">571</span><br><span class="line-number">572</span><br><span class="line-number">573</span><br><span class="line-number">574</span><br><span class="line-number">575</span><br><span class="line-number">576</span><br><span class="line-number">577</span><br><span class="line-number">578</span><br><span class="line-number">579</span><br><span class="line-number">580</span><br><span class="line-number">581</span><br><span class="line-number">582</span><br><span class="line-number">583</span><br><span class="line-number">584</span><br><span class="line-number">585</span><br><span class="line-number">586</span><br><span class="line-number">587</span><br><span class="line-number">588</span><br><span class="line-number">589</span><br><span class="line-number">590</span><br><span class="line-number">591</span><br><span class="line-number">592</span><br><span class="line-number">593</span><br><span class="line-number">594</span><br><span class="line-number">595</span><br><span class="line-number">596</span><br><span class="line-number">597</span><br><span class="line-number">598</span><br><span class="line-number">599</span><br><span class="line-number">600</span><br><span class="line-number">601</span><br><span class="line-number">602</span><br><span class="line-number">603</span><br><span class="line-number">604</span><br><span class="line-number">605</span><br><span class="line-number">606</span><br><span class="line-number">607</span><br><span class="line-number">608</span><br><span class="line-number">609</span><br><span class="line-number">610</span><br><span class="line-number">611</span><br><span class="line-number">612</span><br><span class="line-number">613</span><br><span class="line-number">614</span><br><span class="line-number">615</span><br><span class="line-number">616</span><br><span class="line-number">617</span><br><span class="line-number">618</span><br><span class="line-number">619</span><br><span class="line-number">620</span><br><span class="line-number">621</span><br><span class="line-number">622</span><br><span class="line-number">623</span><br><span class="line-number">624</span><br><span class="line-number">625</span><br><span class="line-number">626</span><br><span class="line-number">627</span><br><span class="line-number">628</span><br><span class="line-number">629</span><br><span class="line-number">630</span><br><span class="line-number">631</span><br><span class="line-number">632</span><br><span class="line-number">633</span><br><span class="line-number">634</span><br><span class="line-number">635</span><br><span class="line-number">636</span><br><span class="line-number">637</span><br><span class="line-number">638</span><br><span class="line-number">639</span><br><span class="line-number">640</span><br><span class="line-number">641</span><br><span class="line-number">642</span><br><span class="line-number">643</span><br><span class="line-number">644</span><br><span class="line-number">645</span><br><span class="line-number">646</span><br><span class="line-number">647</span><br><span class="line-number">648</span><br><span class="line-number">649</span><br><span class="line-number">650</span><br><span class="line-number">651</span><br><span class="line-number">652</span><br><span class="line-number">653</span><br><span class="line-number">654</span><br><span class="line-number">655</span><br><span class="line-number">656</span><br><span class="line-number">657</span><br><span class="line-number">658</span><br><span class="line-number">659</span><br><span class="line-number">660</span><br><span class="line-number">661</span><br><span class="line-number">662</span><br><span class="line-number">663</span><br><span class="line-number">664</span><br><span class="line-number">665</span><br><span class="line-number">666</span><br><span class="line-number">667</span><br><span class="line-number">668</span><br><span class="line-number">669</span><br><span class="line-number">670</span><br><span class="line-number">671</span><br><span class="line-number">672</span><br><span class="line-number">673</span><br><span class="line-number">674</span><br><span class="line-number">675</span><br><span class="line-number">676</span><br><span class="line-number">677</span><br><span class="line-number">678</span><br><span class="line-number">679</span><br><span class="line-number">680</span><br><span class="line-number">681</span><br><span class="line-number">682</span><br><span class="line-number">683</span><br><span class="line-number">684</span><br><span class="line-number">685</span><br><span class="line-number">686</span><br><span class="line-number">687</span><br><span class="line-number">688</span><br><span class="line-number">689</span><br><span class="line-number">690</span><br><span class="line-number">691</span><br><span class="line-number">692</span><br><span class="line-number">693</span><br><span class="line-number">694</span><br><span class="line-number">695</span><br><span class="line-number">696</span><br><span class="line-number">697</span><br><span class="line-number">698</span><br><span class="line-number">699</span><br><span class="line-number">700</span><br><span class="line-number">701</span><br><span class="line-number">702</span><br><span class="line-number">703</span><br><span class="line-number">704</span><br><span class="line-number">705</span><br><span class="line-number">706</span><br><span class="line-number">707</span><br><span class="line-number">708</span><br><span class="line-number">709</span><br><span class="line-number">710</span><br><span class="line-number">711</span><br><span class="line-number">712</span><br><span class="line-number">713</span><br><span class="line-number">714</span><br><span class="line-number">715</span><br><span class="line-number">716</span><br><span class="line-number">717</span><br><span class="line-number">718</span><br><span class="line-number">719</span><br><span class="line-number">720</span><br><span class="line-number">721</span><br><span class="line-number">722</span><br><span class="line-number">723</span><br><span class="line-number">724</span><br><span class="line-number">725</span><br><span class="line-number">726</span><br><span class="line-number">727</span><br><span class="line-number">728</span><br><span class="line-number">729</span><br><span class="line-number">730</span><br><span class="line-number">731</span><br><span class="line-number">732</span><br><span class="line-number">733</span><br><span class="line-number">734</span><br><span class="line-number">735</span><br><span class="line-number">736</span><br><span class="line-number">737</span><br></div></div><p>更多有趣的小网页欢迎关注公众号<code>有趣研究社</code>:</p> <blockquote><p><a href="https://cl.xugaoyi.com/" target="_blank" rel="noopener noreferrer">手写春联<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><br> <a href="https://game.xugaoyi.com/" target="_blank" rel="noopener noreferrer">FC在线模拟器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><br> <a href="https://avatar.xugaoyi.com/" target="_blank" rel="noopener noreferrer">爱国头像生成器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><br> <a href="https://zfb.xugaoyi.com/" target="_blank" rel="noopener noreferrer">到账语音生成器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote></div></div>  <div class="page-edit"><div class="edit-link"><a href="https://github.com/linxi0551/linxi0551.github.io/edit/master/docs/_posts/随笔/我做了一个手写春联小网页，祝大家虎年暴富.md" target="_blank" rel="noopener noreferrer">编辑</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2024/04/26, 10:41:09</span></div></div> <div class="page-nav-wapper"><!----> <!----></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/b35f63/"><div>
            网格布局中的动画
            <!----></div></a> <span class="date">09-15</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/922650/"><div>
            Git修改分支名
            <!----></div></a> <span class="date">08-11</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/55f894/"><div>
            CSS给table的tbody添加滚动条
            <!----></div></a> <span class="date">06-29</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:linxi0551@outlook.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/linxi0551" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://www.yuque.com/knowledge-ocean" title="语雀" target="_blank" class="iconfont icon-yuque"></a><a href="/img/wx.jpg" title="微信" target="_blank" class="iconfont icon-weixin"></a></div> 
  Theme by
  <a href="https://github.com/linxi0551/blogs.github.io" target="_blank" title="本站主题1">Vdoing</a> 
    | Copyright © 2024-2024
    <span>Regulus Lin | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <div class="body-bg" style="background:url() center center / cover no-repeat;opacity:0.5;"></div> <!----> <!----></div><div class="global-ui"><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="http://cdn5.lizhi.fm/audio/2018/06/21/2676453534199338502_hd.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:200px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="right:100px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>Lemon</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>米津玄师</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div><div></div></div></div>
    <script src="/assets/js/app.7b2d88eb.js" defer></script><script src="/assets/js/2.f4c0ca1c.js" defer></script><script src="/assets/js/3.18247282.js" defer></script><script src="/assets/js/86.435a7f7a.js" defer></script>
  </body>
</html>
